<template>
  <MkCardForm v-loading="ctx.infoLoading">
    <!-- 用于展示输入框和患者信息组件的容器 -->
    <div class="display-information">
      <!-- 用于输入申请单号，回车根据单号调用接口触发查询-->
      <el-input 
        v-model.trim="ctx.inputTraApplyBillNo" 
        placeholder="输入申请单号回车" 
        @keyup.enter="getByTraShenQing"
        :disabled="!isEdit" 
        clearable
      >
        <!-- 点击弹出申请单选择对话框 -->
        <template #append>
          <el-button icon="ele-More" @click="openDialog"></el-button>
        </template>
      </el-input>
      <!-- 患者信息组件，可根据 isEdit 状态编辑 -->
      <MkPatient v-model="ctx.traShenQingHuanZheInput" :editable="isEdit" />
    </div>
    <div class="applyData">
      <div>
        <span>申请单</span>
        {{ ctx.traShenQingInput.id }}
      </div>
      <div>
        <span>用血类型</span>
        {{ ctx.traShenQingInput.shenQingLeiXing }}
      </div>
      <div>
        <span>输血目的</span>
        {{ ctx.traShenQingInput.shuXueMuDi }}
      </div>
      <div>
        <span>复核血型</span>
        {{ }}
      </div>
      <div class="line">
        <span>诊断</span>
        {{ ctx.traShenQingHuanZheInput.linChuangZhenDuan }}
      </div>
      <div class="line">
        <MkTable :data="ctx.traShenQingZiBiaoInputList" row-key="id" style="width:100%;">
          <MkColumn label="申请品种" prop="applyVariety" />
          <MkColumn label="申请量" prop="applySum" width="80" />
          <MkColumn label="血型" prop="bloodType" width="80" />
          <MkColumn label="特殊处理" prop="special" />
        </MkTable>
      </div>
      <div class="line">
        <span>用血日期</span>
        <!-- {{ ctx.traShenQingAllMessage.traShenQingInput.yongXueRiQi }} -->
      </div>
    </div>
  </MkCardForm>
  <!-- 申请单选择对话框 -->
  <MkDialog 
    v-model="ctx.shenQingListDialog" 
    title="选择申请单" 
    @close="ctx.shenQingListDialog = false"
    buttons="" 
    width="60%"
  >
    <!-- 表单组件，用于输入申请单查询条件，每行显示 3 个表单元素 -->
    <MkForm :col="3">
      <MkInput label="申请单号" v-model="ctx.shenQingDanCheckParams.danHao" />
      <!-- 日期时间选择器，minWidth去掉组件默认的minWidth -->
      <MkFormDateTime minWidth label="申请日期起始" v-model="ctx.shenQingDanCheckParams.startTime" />
      <!-- 日期时间选择器，用于选择申请日期结束时间 -->
      <MkFormDateTime minWidth label="申请日期结束" v-model="ctx.shenQingDanCheckParams.endTime" />
      <MkInput label="住院号" v-model="ctx.shenQingDanCheckParams.zhuYuanHao" />
      <MkInput label="患者姓名" v-model="ctx.shenQingDanCheckParams.xingMing" />
      <MkInput label="申请科室" v-model="ctx.shenQingDanCheckParams.shenQingKeshi" />
      <MkInput label="申请类型" v-model="ctx.shenQingDanCheckParams.shenQingLeiXing" />
      <MkInput label="申请品种" v-model="ctx.shenQingDanCheckParams.shenQingPinZhong" />
    </MkForm>
    <el-button @click="search" type="primary" size="middle">检索</el-button>
    <MkTable :data="ctx.shenQingList" @row-dblclick="chooseRow" v-loading="ctx.listLoading">
      <MkColumnIndex />
      <MkColumn prop="id" label="申请单" />
      <MkColumn prop="danJuZhuangTai" label="单据状态" min-width="110" />
      <MkColumn prop="zhuYuanHao" label="住院号" />
      <MkColumn prop="xingMing" label="患者姓名" min-width="80" />
      <MkColumn prop="xingMing" label="床号" min-width="70" />
      <MkColumn prop="xingMing" label="科室" />
      <MkColumn prop="xingMing" label="病区" />
      <MkColumn prop="xingMing" label="申请类型" />
      <MkColumn prop="xingMing" label="申请品种" />
    </MkTable>
    <!-- 分页组件，用于切换申请单列表的页码 -->
    <MkPagination 
      v-model:page="ctx.shenQingDanCheckParams.page" 
      v-model:pageSize="ctx.shenQingDanCheckParams.pageSize" 
      :total="ctx.shenQingTotal"
      @query="search" 
    />
  </MkDialog>
</template>
<script lang="ts" setup>
import { TraShenQingInput, TraShenQingApi, TraShenQingHuanZheInput } from '/@/api/tra/TraShenQing';
import { TraShenQingZiBiaoInput } from '/@/api/tra/TraShenQingZiBiao';
// 获取工具函数
import { getPageSize } from '/@/utils';


const emits = defineEmits(['getByTraShenQing'])
// 输血申请模块--患者信息
defineOptions({
  name: 'MkPatientForm',
});
/**
 * 父组件传递的属性
 * isEdit：是否可编辑，布尔类型，默认值为 true
 */
const props = defineProps({
  isEdit: {
    type: Boolean,
    default: true
  }
});
/**
 * 申请单查询参数的类型定义 
 * TODO 先在这里写死，后续根据接口dto获取
 */
interface shenQingDanCheckInput {
  danHao?: string
  page: 1
  pageSize: 20,
  startTime?: string | Date 
  endTime?: string | Date 
  zhuYuanHao?: string
  xingMing?: string
  shenQingKeshi?: string
  shenQingLeiXing?: string
  shenQingPinZhong?: string
}
/**
 * 初始化病人信息及相关数据的函数
 * 返回一个包含病人信息、查询参数、对话框状态等数据的对象
 */
const initialState = () => (
  {
    // 输入的申请单号
    inputTraApplyBillNo: '',
    // 输血申请信息
    traShenQingInput: {} as TraShenQingInput,
    // 输血申请患者信息
    traShenQingHuanZheInput: {} as TraShenQingHuanZheInput,
    // 输血申请子表信息列表
    traShenQingZiBiaoInputList: [] as TraShenQingZiBiaoInput[],
    // 申请单查询参数
    shenQingDanCheckParams: {
      page: 1,
      pageSize: getPageSize(), 
    } as shenQingDanCheckInput,
    // 申请单选择对话框的显示状态
    shenQingListDialog: false,
    // 申请单列表数据
    shenQingList: [] as TraShenQingInput[],
    // 申请单列表的总数量
    shenQingTotal: 0,
    listLoading: false, // 表格加载状态
    infoLoading: false, // 信息加载状态
  }
);
// 使用 reactive 函数将初始状态转换为响应式对象
const ctx = reactive(initialState());
/**
 * 重置数据为初始状态的函数
 * 将 ctx 对象的属性重置为初始状态
 */
const newEntity = () => {
  Object.assign(ctx, initialState());
};

/**
 * 根据输入的申请单号获取输血申请信息的函数
 * 调用 TraShenQingApi 的 get 方法获取数据，并更新 ctx 中的相关信息
 * 触发 'getByTraShenQing' 事件
 */
const getByTraShenQing = () => {
  // 调用 TraShenQingApi 的 get 方法获取数据
  ctx.infoLoading = true;
  TraShenQingApi.get(ctx.inputTraApplyBillNo as any).then((res) => {
    ctx.traShenQingInput = res.traShenQing as TraShenQingInput;
    ctx.traShenQingHuanZheInput = res.traShenQingHuanZhe as TraShenQingHuanZheInput;
    ctx.traShenQingZiBiaoInputList = res.traShenQingZiBiaoList as TraShenQingZiBiaoInput[];
  }).finally(() => {
    ctx.infoLoading = false;
  });
  // 触发 'getByTraShenQing' 事件
  emits('getByTraShenQing');
};

/**
 * 打开申请单选择对话框的函数
 * 将对话框显示状态设置为 true，并触发查询操作
 */
const openDialog = () => {
  ctx.shenQingListDialog = true;
  search();
}
/**
 * 查询申请单列表的函数
 * 调用 TraShenQingApi 的 page 方法获取数据，并更新 ctx 中的申请单列表和总数量
 */
const search = () => {
  ctx.listLoading = true;
  TraShenQingApi.page(ctx.shenQingDanCheckParams).then((res) => {
    ctx.shenQingList = res.items;
    ctx.shenQingTotal = res.total;
  }).finally(() => {
    ctx.listLoading = false;
  });
}
/**
 * 选择申请单列表中某一行的函数
 * 将选中行的申请单号赋值给输入框，并触发获取输血申请信息的操作，最后关闭对话框
 * @param row 选中的申请单行数据
 */
const chooseRow = (row: TraShenQingInput) => {
  ctx.inputTraApplyBillNo = row.id
  getByTraShenQing()
  ctx.shenQingListDialog = false;
}
// 暴露 newEntity 和 ctx 给父组件使用
defineExpose({ newEntity, ctx })
</script>
<style lang="scss" scoped>
.display-information {
  width: 100%;
  padding: 0.5rem 0.5em;

  .el-input {
    margin: 0;
    margin-bottom: 0.5rem;
  }
}

.applyData {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.1rem;
  padding: 0.5rem 0.5em;

  &>div {
    width: 50%;
    padding: 5px 0;

    span {
      font-weight: bold;
    }

    span:after {
      content: '：';
    }
  }

  &>div.line {
    width: 100%;
  }
}
</style>